<div class="gutter-example" style="margin-bottom: 20px">
	<div nz-row [nzGutter]="8">
		<div nz-col class="gutter-row" [nzSpan]="6">
			<div class="gutter-box"></div>
		</div>
		<div nz-col class="gutter-row" [nzSpan]="4">
			<div class="gutter-box"></div>
		</div>
		<div nz-col class="gutter-row" [nzSpan]="8" style="text-align: right">
			<div class="gutter-box">
				
			</div>
		</div>
		<div nz-col class="gutter-row" [nzSpan]="6">
			<div class="gutter-box" style="text-align: right">
				<nz-input [nzType]="'search'"
						  [nzPlaceHolder]="'请输入用户名进行搜索'"
						  [(ngModel)]="_value"
						  style="width: 100%;">
				</nz-input>
			</div>
		</div>
	</div>
</div>

<nz-table #nzTable [nzDataSource]="userList" [nzPageSize]="10" [nzShowSizeChanger]="true" nzCheckbox="true">
	<thead nz-thead>
	<tr>
		<th nz-th><span>序号</span></th>
		<th nz-th><span>用户名</span></th>
		<th nz-th><span>工号</span></th>
		<th nz-th><span>头衔</span></th>
		<th nz-th><span>真实姓名</span></th>
		<th nz-th><span>部门</span></th>
		<th nz-th><span>角色</span></th>
		<th nz-th><span>账号状态</span></th>
		<th nz-th><span>注册时间</span></th>
		<th nz-th><span>最近登陆时间</span></th>
		<th nz-th><span>登陆次数</span></th>
		<th nz-th><span>地址</span></th>
		<th nz-th style="text-align: right"><span>操作</span></th>
	</tr>
	</thead>
	<tbody nz-tbody>
	<tr nz-tbody-tr *ngFor="let data of nzTable.data; let idx = index;">
		<td nz-td>
			<a>{{idx+1}}</a>
		</td>
		<td nz-td>
			<a>{{data.name}}</a>
		</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.age}}</td>
		<td nz-td>{{data.address}}</td>
		<td nz-td style="text-align: right">
			<!--btn-->
			<nz-popover [nzTitle]="'温馨提示'" [nzPlacement]="'bottom'">
				<button nz-button [nzType]="'primary'" [nzShape]="'circle'" nz-popover>
					<i class="anticon anticon-edit"></i>
				</button>
				<ng-template #nzTemplate>
					<div>
						<p>可以修改用户权限信息！</p>
						<p>通过修改用户的角色</p>
					</div>
				</ng-template>
			</nz-popover>
			<!---->
		</td>
	</tr>
	</tbody>
</nz-table>
